<template>
  <div class="Product-Title">
    <div class="Title-left">
      <a class="left-home" href="../../home">
        <van-icon class="home-icon" name="wap-home-o" />
      </a>
    </div>
    <div class="Title-text">值得买</div>
    <div class="Title-right">
      <a class="right-search" href="../../search">
        <van-icon class="search-icon" name="search" />
      </a>
      <a class="right-shopcart" href="../../shopcart">
        <van-icon class="shopcart-icon" name="shopping-cart-o" />
      </a>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  name: 'ProductTitle',
})

</script>

<script lang="ts" setup>
</script>

<style scoped>
.Product-Title {
  position: relative;
  color: #000;
  height: 50px;
  width: 100%;
  font-size: 14px;
}

.Product-Title .Title-left {
  float: left;
  height: 100%;
}

.Product-Title .Title-left .left-home .home-icon {
  font-size: 25px;
  margin: 10px;
}

.Product-Title .Title-text {
  position: absolute;
  font-size: 18px;
  width: 200px;
  height: 50px;
  text-align: center;
  left: 50%;
  top: 50%;
  margin-top: -12.5px;
  margin-left: -100px;
}

.Product-Title .Title-right {
  float: right;
  height: 50px;
  margin: 10px;
}

.Product-Title .Title-right .right-search .search-icon {
  font-size: 25px;
  margin-right: 10px;
}

.Product-Title .Title-right .right-shopcart .shopcart-icon {
  font-size: 25px;
  /* margin: 10px; */

}
</style>